<!DOCTYPE HTML>
<html>

<head>
	<!-- support for mobile touch devices -->
	<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../reset.css">
	<link rel="stylesheet" href="../app.css">
	<link rel="stylesheet" href="../icon-classes.css">
	<link rel="stylesheet" href="../tool-help.css">
</head>

<body>
	<div id="app">
		<div class="wrapper">
			<!-- Select Tool Category -->
			<ul class="tool-category-list">
				<li><a class="tools" data-category="tools" href="#">Tools</a></li>
			</ul>

			<!-- Select Active Tool -->
			<ul class="tool-category active" data-tool-category="tools">
				<li><a href="#" data-tool="StackScroll" data-tool-interaction="drag">Mouse stack</a></li>
				<li><a href="#" data-tool="StackScrollMouseWheel" data-tool-interaction="wheel">StackScrollMouseWheel</a></li>
			</ul>

			<!-- Our beautiful element targets -->
			<div class="cornerstone-element-wrapper-help">
				<div class="cornerstone-element-help" data-index="0" oncontextmenu="return false"></div>
				<div class="tool-help">
					<h1>Stack example</h1>
					<table>
						<tr>
							<td>
								<label for="nframes">Number of frames: </label>
								<input type="number" id="nframes" min="1" value="150">
							</td>
							<td>
								<button type="button" id="loadStackBtn">
									Load stack
								</button>
							</td>
					</table>
				</div>
			</div>
		</div>
	</div>
</body>



<!-- include the hammer.js library for touch gestures-->
<script src="https://unpkg.com/hammerjs@2.0.8/hammer.js"></script>
<!-- include Mousetrap to demo keyboard functionality -->
<script src="https://unpkg.com/mousetrap@1.6.2/mousetrap.js"></script>

<!-- include the cornerstone library -->
<script src="https://unpkg.com/cornerstone-core@2.2.6/dist/cornerstone.js"></script>
<script src="https://unpkg.com/cornerstone-math@0.1.6/dist/cornerstoneMath.js"></script>
<script src="../../dist/cornerstoneTools.js"></script>
<script>window.cornerstoneTools || document.write('<script src="https://unpkg.com/cornerstone-tools">\x3C/script>')</script>

<!-- include special code for these examples which provides images -->
<script src="../textImageLoader.js"></script>

<script>
	cornerstoneTools.init();

	function init() {
		const element = document.querySelector('.cornerstone-element-help');
		cornerstone.enable(element);
		element.tabIndex = 0;
		element.focus();
		const mouseButtonMask = 1;

		// Iterate over all tool-category links
		const toolCategoryLinks = document.querySelectorAll('ul.tool-category-list a');
		const toolCategorySections = document.querySelectorAll('ul.tool-category');
		Array.from(toolCategoryLinks).forEach(link => {
			//
			const categoryName = link.getAttribute('data-category');
			const categoryElement = document.querySelector(`section[data-tool-category="${categoryName}"]`)

			// Setup listener
			link.addEventListener('click', (evt) => {
				evt.preventDefault();
				setToolCategoryActive(categoryName);
			});
		})

		// Iterate over all tool buttons
		const toolButtons = document.querySelectorAll('a[data-tool]');
		Array.from(toolButtons).forEach(toolBtn => {
			// Add the tool
			const toolName = toolBtn.getAttribute('data-tool');
			const apiTool = cornerstoneTools[`${toolName}Tool`];

			if (apiTool) {
				cornerstoneTools.addTool(apiTool);
			} else {
				console.warn(`unable to add tool with name ${toolName}Tool`);
				console.log(cornerstoneTools)
			}

			toolBtn.addEventListener('click', (evt) => {
				const toolInteraction = evt.target.getAttribute('data-tool-interaction')
				const isInActive = !evt.target.classList.contains('active');
				if (isInActive) {
					setButtonActive(toolName, mouseButtonMask, toolInteraction);
					cornerstoneTools.setToolActive(toolName, { mouseButtonMask });
				} else {
					setButtonInActive(evt.target, mouseButtonMask, toolInteraction);
					cornerstoneTools.setToolDisabled(toolName);
				}
			});
		});

		cornerstoneTools.setToolActive('StackScroll', { mouseButtonMask });
		cornerstoneTools.setToolActive('StackScrollMouseWheel', { mouseButtonMask });
		setButtonActive('StackScroll', mouseButtonMask, 'drag');
		setButtonActive('StackScrollMouseWheel', mouseButtonMask, 'wheel');

		document.getElementById('loadStackBtn').onclick = loadStackCb;

		loadStack(150, element);
	}

	function setAllToolsPassive() {
		cornerstoneTools.store.state.tools.forEach((tool) => {
			cornerstoneTools.setToolPassive(tool.name);
		});
	}

	function loadStack(nFrames, element) {
		const n0 = Math.floor(nFrames / 2);
		const imageIds = (new Array(Number(nFrames)))
			.fill()
			.map(
				(_, i) => `example-n://${i}`
			);
		stack = {
			currentImageIdIndex: n0,
			imageIds
		};

		cornerstone.loadImage(imageIds[n0]).then(function (image) {
			cornerstone.displayImage(element, image);
			cornerstoneTools.addStackStateManager(element, ['stack']);
			cornerstoneTools.addToolState(element, 'stack', stack);
		});
	}

	function loadStackCb() {
		const nFrames = document.getElementById('nframes').value;
		const element = document.querySelector('.cornerstone-element-help');
		loadStack(nFrames, element);
	}

	const setToolCategoryActive = (categoryName) => {
		Array.from(toolCategoryLinks).forEach(toolLink => {
			if (categoryName === toolLink.getAttribute('data-category')) {
				toolLink.classList.remove('active');
				toolLink.classList.add('active');
			} else {
				toolLink.classList.remove('active');
			}
		});

		Array.from(toolCategorySections).forEach(toolCategorySection => {
			if (categoryName === toolCategorySection.getAttribute('data-tool-category')) {
				toolCategorySection.classList.remove('active');
				toolCategorySection.classList.add('active');
			} else {
				toolCategorySection.classList.remove('active');
			}
		});
	}

	const setButtonActive = (toolName, mouseButtonMask, toolInteraction) => {
		const toolButtons = document.querySelectorAll('a[data-tool]');

		Array.from(toolButtons).forEach(toolBtn => {
			// Classes we need to set & remove
			let mouseButtonIcon = `mousebutton-${mouseButtonMask}`;
			let touchIcon = `touch-1`

			// Update classes depending on the toolInteraction we clicked
			if (toolInteraction === 'none') {
				return;
			} else if (toolInteraction === 'multitouch') {
				mouseButtonIcon = null;
				touchIcon = 'touch-2';
			} else if (toolInteraction === 'pinch') {
				mouseButtonIcon = null;
				touchIcon = 'touch-pinch';
			} else if (toolInteraction === 'wheel') {
				mouseButtonIcon = 'mousebutton-wheel';
				touchIcon = null;
			}

			// Update our target button
			if (toolName === toolBtn.getAttribute('data-tool')) {
				toolBtn.className = "";
				toolBtn.classList.add('active');
				if (mouseButtonIcon) {
					toolBtn.classList.add(mouseButtonIcon)
				}
				if (touchIcon) {
					toolBtn.classList.add(touchIcon)
				}
				// Remove relevant classes from other buttons
			} else {
				if (mouseButtonIcon && toolBtn.classList.contains(mouseButtonIcon)) {
					toolBtn.classList.remove(mouseButtonIcon);
				}
				if (touchIcon && toolBtn.classList.contains(touchIcon)) {
					toolBtn.classList.remove(touchIcon);
				}
				if (toolBtn.classList.length === 1 && toolBtn.classList[0] === 'active') {
					toolBtn.classList.remove('active');
				}
			}
		});
	}

	const setButtonInActive = (toolBtn, mouseButtonMask, toolInteraction) => {
		let mouseButtonIcon = `mousebutton-${mouseButtonMask}`;
		let touchIcon = `touch-1`

		// Update classes depending on the toolInteraction we clicked
		if (toolInteraction === 'none') {
			return;
		} else if (toolInteraction === 'multitouch') {
			mouseButtonIcon = null;
			touchIcon = 'touch-2';
		} else if (toolInteraction === 'pinch') {
			mouseButtonIcon = null;
			touchIcon = 'touch-pinch';
		} else if (toolInteraction === 'wheel') {
			mouseButtonIcon = 'mousebutton-wheel';
			touchIcon = null;
		}

		if (mouseButtonIcon && toolBtn.classList.contains(mouseButtonIcon)) {
			toolBtn.classList.remove(mouseButtonIcon);
		}
		if (touchIcon && toolBtn.classList.contains(touchIcon)) {
			toolBtn.classList.remove(touchIcon);
		}
		if (toolBtn.classList.length === 1 && toolBtn.classList[0] === 'active') {
			toolBtn.classList.remove('active');
		}
	}



	init();

</script>

</html>
